import React from 'react';
import PasswordManagers from './passwordManager.js';
import MyHidden from '../../MyHidden';
import List from '@mui/material/List';
import ListItem from '@mui/material/ListItem';
import ListItemText from '@mui/material/ListItemText';
import DeleteIcon from '@mui/icons-material/Delete';
import IconButton from '@mui/material/IconButton';
import RemoveRedEyeIcon from '@mui/icons-material/RemoveRedEye';
import { useSelector, useDispatch } from 'react-redux';
import * as store from '../../reducers/partsSlice';
function CredentialListElement(props) {
  const [state, setState] = React.useState({ passwordEl_type: 'password',hide:false});
  let credential = props.credential;
  var container = (
    <ListItem style={{ display: state.hide ? 'none' : 'inline' }}>
      <ListItemText>{credential.domain}</ListItemText>
      <input value={credential.username} disabled={true}></input>
      <input
        type={state.passwordEl_type}
        value={credential.password}
        disabled={true}
      ></input>
      <IconButton
        onClick={() => {
          if (state.passwordEl_type === 'password') {
            setState((state)=>({...state,passwordEl_type: 'text' }));

          } else {
            setState((state)=>({...state,passwordEl_type: 'password' }));
          }
        }}
      >
        <RemoveRedEyeIcon />
      </IconButton>
      <IconButton
        onClick={() => {
          console.log('delete click');
          PasswordManagers.getConfiguredPasswordManager().then((manager) => {
            console.log('delete');
            manager.deleteCredential(credential.domain, credential.username);
            setState((state)=>({...state,hide:true }));
          });
        }}
      >
        <DeleteIcon />
      </IconButton>
    </ListItem>
  );
  return container;
}
export default function PasswordViewer(props) {
  const dispatch = useDispatch();
  var show_pwdview = useSelector((state) => state.show_pwdview);
  const [state, setState] = React.useState({
    credentials: [],
  });
  console;
  React.useEffect(() => {
    PasswordManagers.getConfiguredPasswordManager().then((manager) => {
      if (!manager.getAllCredentials) {
        throw new Error('unsupported password manager');
      }
      manager.getAllCredentials().then((credentials) => {
        setState((state) => ({ ...state, credentials: credentials }));
      });
    });
  }, []);
  show = () => {
    dispatch(store.partsSlice.actions.SHOW_PWDVIEW(true));
  };
  hide = () => {
    dispatch(store.partsSlice.actions.SHOW_PWDVIEW(false));
  };
  // console.log("PasswordViewer==================")
  // console.log(state)
  let eles = state.credentials.map((cred, index) => {
    return (
      <CredentialListElement key={index} credential={cred} parent={this} />
    );
  });
  let emptyHeading_hidden = state.credentials.length !== 0;

  return (
    <MyHidden
      title=""
      on_hidden={() => {
        dispatch(store.partsSlice.actions.SHOW_PWDVIEW(false));
      }}
      hidden={!show_pwdview}
    >
      <div>
        <List>{eles}</List>
      </div>
    </MyHidden>
  );
}
